<!DOCTYPE html>
<html>
<head>
    <title>试试看吧</title>
    <meta charset="utf-8">
    <!-- 响应式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet"  href="sliderStyle.css">
    <style>
      #ecoCanvas {
        border : 2px solid black;
      }
    </style>
</head>
<body>
   <canvas id="ecoCanvas" width="340" height="500"></canvas>
   
    <!--滑块部分-->
  <div class="slider-container">
    <p class="slider-label">靠拢: <span class="sliderValue" id="sliderValue1">0</span></p>
    <input type="range" id="slider1" class="slider" min="0" max="0.2" value="0.01" step="0.001">
    
    <p class="slider-label">对齐: <span class="sliderValue" id="sliderValue2">0</span></p>
    <input type="range" id="slider2" class="slider" min="0" max="0.2" value="0.01" step="0.01">
    
    <p class="slider-label">远离: <span class="sliderValue" id="sliderValue3">0</span></p>
    <input type="range" id="slider3" class="slider" min="0" max="0.2" value="0.01" step="0.01">
    
    <p class="slider-label">半径: <span class="sliderValue" id="sliderValue4">0</span></p>
    <input type="range" id="slider4" class="slider" min="0" max="300" value="100" step="1">
    
    <p class="slider-label">食物吸引力: <span class="sliderValue" id="sliderValue5">0</span></p>
    <input type="range" id="slider5" class="slider" min="0" max="200" value="50" step="1">
    
  
  </div>   
   <script type="module">
     import './modules/slider_control.js';
     import  Bird from './modules/birds.js';
     
   </script>
</body>
</html>